<template>
		<!-- 投票 wwl -->
	<page ref='page'>
		<view class="">
			<view class="fenlei" :style="'height: '+height+'px;'">
				<view class="text"  >
					<view class="texts" >在下方黄色方框里写字</view>
					<!-- <view class="text" v-if="qianmingsort == 1" >
						几号楼几单元几号
					</view> -->
					<view class="texts" v-if="qianmingsort == 2 && qiansorts == 1" >
						房主姓名第一个字
					</view>
					<view class="texts" v-if="qianmingsort == 2 && qiansorts == 2" >
						房主姓名第二个字
					</view>
					<view class="texts" v-if="qianmingsort == 2 && qiansorts == 3" >
						房主姓名第三个字，没有第三个字可不填
					</view>
					<!-- <view class="text" v-if="qianmingsort == 3" >
						签字时间
					</view> -->
					<!-- 生成单元号时间联系方式 -->
					<view class="texts" >
						楼号、时间、联系方式将自动填写
					</view>
					<view class="yingcang">
						
						<PCanvas width="295" height="80" ref="canvasId_peter" canvasId="canvasId_peter" unit='px' :options="options"></PCanvas>
					</view>
				</view>
				<!-- <view class="beijintu1" v-if="qianmingsort == 1" >
					<l-signature disableScroll  ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" ></l-signature>
				</view> -->
				<view class="beijintu" v-if="qianmingsort == 2 && qiansorts < 4" >
					<l-signature disableScroll  ref="signatureRef" penSize="6" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" ></l-signature>
				</view>
				<!-- <view class="beijintu" v-if="qianmingsort == 2 && qiansorts == 2" >
					<l-signature disableScroll  ref="signatureRef2" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" ></l-signature>
				</view>
				<view class="beijintu" v-if="qianmingsort == 2 && qiansorts == 3" >
					<l-signature disableScroll  ref="signatureRef3" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" ></l-signature>
				</view> -->
				<view class="img_list" v-if="qiansorts == 4" >
					<image :src="bgUrl" class="img" :style="'height: '+heightss+'px;'" mode="scaleToFill"></image>
				</view>
				<view class="anniu">
					<button @click="tijiao('clear')" class="anniuyangs">清空</button>
					<button @click="tijiao('undo')" class="anniuyangs">撤消</button>
					<button @click="tijiao('save')" class="anniuyangs">{{qiansorts == 3 ? '保存' : '下一个'}}</button>
					<!-- <button @click="tijiao('openSmooth')">压感{{openSmooth?'开':'关'}}</button> -->
				</view>
			</view>
		</view>
		<!-- 先合成签名 -->
		<liu-picture-compositionqianming ref="picRefqianming"
		:widthqianming="240" 
		:heightqianming="80" 
		:dwidthqianming="80" 
		:dheightqianming="80" 
		:xqianming="0" 
		:yqianming="0" 
		:dxqianming="dxwdightsleft" 
		:dyqianming="0" 
		:bgUrlqianming="bgUrlqianming" 
		:photoUrlqianming="photoUrl" 
		@changeqianming="changeqianming"></liu-picture-compositionqianming>
		<!-- 合成到文件 -->
		<liu-picture-composition ref="picRef" 	
		:width="1654" 
		:height="2339" 
		:dWidth="dWidth" 
		:dHeight="dHeight" 
		:x="0" 
		:y="0" 
		:dx="dxwdight" 
		:dy="dyheight" 
		:bgUrl="bgUrl" 
		:photoUrl="bgUrlqianming" 
		@change="change"></liu-picture-composition>

		
	</page>
		
	
</template>

<script>
	import PCanvas from '@/components/p-canvas/p-canvas.vue'
	import {
		getUserInfo,getvote_list,getvote_edit,getvote_detail
	} from '@/utils/getRequest.js'
	
	export default {
		components:{
		    PCanvas
		},
	    data() {
	        return {
				options: [
                        {
                            shape: 'text',
                            x: 0, //位置
                            y: 30, //位置
                            text: '几号楼几单元601',
                            fontSize: 40,
                            color: '#000',
                            mx:290,
                        },
                        // {
                        //     shape: 'text',
                        //     x: 600, //位置
                        //     y: 0, //位置
                        //     text: '2023年9月1日',
                        //     fontSize: 40,
                        //     color: '#000',
                        //     mx:300,
                        // },
                        
                        // {
                        //     shape: 'text',
                        //     x: 900, //位置
                        //     y: 0, //位置
                        //     text: '18334952639',
                        //     fontSize: 40,
                        //     color: '#000',
                        //     mx:300,
                        // }

                ],
				height:uni.getSystemInfoSync().windowHeight-45,
				heightss:uni.getSystemInfoSync().windowHeight-60,
	            title: 'Hello',
	            penColor: '#000',
	            penSize: 5,
	            url: '',
	            openSmooth: true,
				qianmingsort:2,//判断签名到第几布了
				qiansorts:1,//判断签名字到第几步了
				bgUrl: '',//背景图片
				bgUrlqianming: 'https://xiaoqu.wuguoxin.vip/uploads/web/qianming.png',//背景图片2先合成签名
				vote_sort:1,//签名到第几行了
				photoUrl: '',//要合并的图片
				id:0,//签名的ID
				type:2,//
				sf_img:'',
				dWidth:240,//签名宽度
				dHeight:80,//签名高度
				dxwdight:340,//签名距离左边边的宽度
				dyheight:326,//签名距离上边的高度
				meivoteheight:89,//每行的高度
				dxwdightsleft:0,//单签名的宽度
				dWidths:80,//单字签名宽度
				timer:0,//定时id
				xiayiye:0,//是否下一页
				hrq_danyuanimg:'',//生成单元信息
				hrq_riqiimg:'',//生成时间日期
				hrq_lianxiimg:'',//生成联系方式
				userhouse_record:[],//个人信息
				bgUrldaiqianming:'',//只带签名的背景图
				bgUrldairiqi:'',//带日期等信息的背景图
				qianmingnum:0,//签名到那一步了，0生成待签名的图片，1生成待楼号的图片，2生成待时间的图片，3生成待联系方式的图片
				vote_jinxin_img_time:'',//带日期等的背景图
	        }
	    },
	    methods: {
			//更新单元时间联系方式图片
			updateCanvas(){
                this.options[5].children[0].url = 'https://img0.baidu.com/it/u=2206833286,3534544834&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
            },
			//生成单元时间联系方式图片
            getCanvasUrl(){
                this.$refs.canvasId_peter.getCanvasUrl().then(r=>{
                    console.log(r,'生成单元时间联系方式图片');
					if(this.qiansorts == 2){
						this.hrq_danyuanimg = r;
						//定义一个日期对象;
						var dateTime = new Date();
						//获得系统年份;
						var year = dateTime.getFullYear();
						//获得系统月份;
						var month = dateTime.getMonth() + 1;
						//获得系统当月分天数;
						var day = dateTime.getDate();
						console.log(year,'年月');
						this.options[0].text = year+'年'+month+'月'+day+'日';
						console.log(this.options[0].text,'年鱼儿');
						
					}else if(this.qiansorts == 3){
						this.hrq_riqiimg = r;
						this.options[0].text = this.userhouse_record.phone;
					}else if(this.qiansorts == 4){
						this.hrq_lianxiimg = r;
					}
					
					// uni.showLoading()
					this.urlTobase64(r)
					// this.allloading = true
					this.$upload(r).then(result =>{
						if(result.code == 200){
							// this.infoObj.pic_arr.push(result.data.img)
							console.log(result,'上传图片2');
							// this.bgUrlqianming = result.data.img
							
							// this.urlTobase64(result.data.img)
							
							// this.allloading = false
							// this.$forceUpdate()
							// uni.hideLoading()
						}
					})
					
                    // #ifndef H5
                    // uni.saveImageToPhotosAlbum({
                    //     filePath: r,
                    //     success(res) {
                    //         uni.showToast({
                    //             title: '已保存到相册',
                    //             duration: 2000
                    //         });
                    //     }
                    // })
                    // #endif
                })
            },
			//签名生成
	        tijiao(type) {
	             if(type == 'openSmooth') {
	                 this.openSmooth = !this.openSmooth
	                 return
	             }
	            if (type == 'save') {
					// if(this.qianmingsort == 2 && this.qiansorts == 1){
						this.$refs.signatureRef.canvasToTempFilePath({
							success: (res) => {
								// console.log(res,'签名传进来的1')
								// 是否为空画板 无签名
								console.log(res.isEmpty)
								// 生成图片的临时路径
								// H5 生成的是base64
								this.photoUrl = res.tempFilePath
								console.log(this.photoUrl,'临时图片11')
								// let xia = this.qianmingsort+1;
								let xiqiansorts = this.qiansorts+1;
								// this.qiansorts = xiqiansorts;
								// this.compositionUrl();
								
								if(this.qianmingsort == 2 && xiqiansorts < 5){
									//计算宽度距离
									// if(this.qiansorts == 2){
									// 	let juli = this.dxwdight+(this.dWidth*this.qiansorts);
									// 	this.dxwdight = juli;
									// }else{
										
									// }
									if(xiqiansorts > 2){
										let julileft = this.dxwdightsleft+this.dWidths;
										this.dxwdightsleft =  julileft;
									}
									
									console.log(this.dxwdightsleft,'计算宽度距离')
									this.compositionUrlqianming();
									//最终合成
									// if(xiqiansorts == 4){
									// 	//先查询合成到哪一行了
									// 	this.getvote_detail();
										
									// 	// this.compositionUrl();
									// }else{
										//合成签名
										
									// }
									
								}
								this.qiansorts = xiqiansorts;
								//点击保存了就提交到后台
								// if(this.qiansorts == 3){
								// 	this.compositionUrl();
								// }
								// if(xia < 4){
								// 	if(this.qianmingsort == 2 && xiqiansorts < 4){
								// 		this.qiansorts = xiqiansorts;
								// 	}else{
								// 		this.qianmingsort = xia;
								// 	}
								// }
							}
						})
					// }
					// if(this.qianmingsort == 2 && this.qiansorts == 2){
					// 	this.$refs.signatureRef2.canvasToTempFilePath({
					// 		success: (res) => {
					// 			console.log(res,'签名传进来的2')
					// 			// 是否为空画板 无签名
					// 			console.log(res.isEmpty)
					// 			// 生成图片的临时路径
					// 			// H5 生成的是base64
					// 			this.photoUrl = res.tempFilePath
					// 			console.log(this.photoUrl,'临时图片12')
					// 			let xiqiansorts = this.qiansorts+1;
					// 			this.qiansorts = xiqiansorts;
					// 			this.compositionUrl();
					// 		}
					// 	})
					// }
					// if(this.qianmingsort == 2 && this.qiansorts == 1){
					// 	this.$refs.signatureRef3.canvasToTempFilePath({
					// 		success: (res) => {
					// 			console.log(res,'签名传进来的3')
					// 			// 是否为空画板 无签名
					// 			// 生成图片的临时路径
					// 			// H5 生成的是base64
					// 			this.photoUrl = res.tempFilePath
					// 			console.log(this.photoUrl,'临时图片13')
					// 			this.compositionUrl();
					// 		}
					// 	})
					// }
	                return
	            }
	            if (this.$refs.signatureRef)
	                this.$refs.signatureRef[type]()
	        },
			//总合成调用
			compositionUrl() {
				uni.showLoading({
					title: '正在生成中...',
					mask:true
				});
				console.log(this.bgUrl,'合成背景图:')
				console.log(this.bgUrlqianming,'合成签名:')
                this.$nextTick(res => {
                    this.$refs.picRef.getNewUrl()
                })
            },
			//总合成回调
            change(e) {
                // console.log('合成的图片地址:', e)
				this.bgUrl = e;
				console.log(this.qiansorts,'签名到第几个字了2')
				//点击保存了就提交到后台
				// if(this.qiansorts == 4){
					//生成各种图片
					this.setriqihqt();
				// }else{
				// 	this.tijiao('clear')
				// }
				uni.hideLoading()
            },
			//单合成签名
			compositionUrlqianming() {
				uni.showLoading({
					title: '正在生成中...',
					mask:true
				});
				console.log(this.bgUrlqianming,'单合成签名22')
				console.log(this.photoUrl,'单合成签名1122')
			    this.$nextTick(res => {
			        this.$refs.picRefqianming.getNewUrl()
			    })
			},
			//单合成签名回调
			changeqianming(e) {
			    console.log('合成的图片地址66:', e)
				this.bgUrlqianming = e;
				console.log(this.qiansorts,'签名到第几个字了22')
				this.getCanvasUrl()
				//点击保存了就提交到后台
				//最终合成
				if(this.qiansorts == 4){
					this.setPhoto2()
					uni.hideLoading()
					//先查询合成到哪一行了
					this.getvote_detail();
					
					// this.compositionUrl();
				}else{
					// this.setPhoto2()
					this.tijiao('clear')
				}
				
			},
			//查询签名到哪一行了那一页
			async getvote_detail() {
				clearTimeout(this.timer);
				uni.showLoading({
					title: '正在签名中...',
					mask:true
				});
				var res = await getvote_detail({id:this.id})
				console.log(res,'投票详情');
				
				if(res.code == 200){
					if(res.data.vote_sort == 1){
						this.bgUrl = res.data.img_url;
						this.vote_jinxin_img_time = res.data.img_url;
					}else{
						this.bgUrl = res.data.vote_jinxin_img;
						this.vote_jinxin_img_time = res.data.vote_jinxin_img_time;
					}
					this.xiayiye = res.data.xiayiye;
					
					this.vote_sort = res.data.vote_sort;
					//计算宽度距离
					let juli = this.dxwdight+this.dWidth;
					this.dxwdight = juli;
					//计算高度距离
					let juligao = this.dyheight+(this.vote_sort*this.meivoteheight);
					this.dyheight = juligao;
					console.log(this.dyheight,'计算高度距离2')
					
					uni.hideLoading()
					this.compositionUrl();
					
				}else if(res.code == 300){
					// uni.showToast({
					// 	title:res.msg,
					// 	icon:'error'
					// })
					this.timer = setTimeout(() => {
						uni.hideLoading()
						this.getvote_detail();
					}, 1000)
					
					
				}
				
			},
			//提交投票
			async getvote_edit() {
				if(this.loading || this.allloading) return
				uni.showLoading()
				var res = await getvote_edit({id:this.id,bgUrl:this.bgUrldaiqianming,vote_sort:this.vote_sort,type:this.type,xiayiye:this.xiayiye,bgUrldairiqi:this.bgUrldairiqi})
				console.log(res,'投票操作');
				
				if(res.code == 200){
					uni.showToast({
						title:'签名成功',
						icon:'success'
					})
					// 需要刷新页面
					setTimeout(()=>{
						uni.hideLoading()
						this.loading = false
						uni.navigateBack({delta: 1})
					},2000)
					
				}else if(res.code == 300){
					uni.showToast({
						title:'不可重复签名',
						icon:'error'
					})
					uni.hideLoading()
					this.loading = false
				}
				
			},
			//生成待日期等的图片
			setriqihqt() {
				uni.showLoading({
					title: '正在生成中...',
					mask:true
				});
				if(this.qianmingnum == 0){
					this.qianmingnum = 1;
					this.setPhoto();
				}else if(this.qianmingnum == 1){
					//带日期等的单独签名
					this.qianmingnum = 2;
					this.bgUrl = this.vote_jinxin_img_time;
					this.compositionUrl();
				}else if(this.qianmingnum == 2){
					this.qianmingnum = 3;
					this.bgUrlqianming = this.hrq_danyuanimg;
					//图像宽高
					this.dWidth = 290;
					this.dHeight = 80;
					//图像的位置
					this.dxwdight = this.dxwdight-330;
					// this.dyheight = this.hrq_danyuanimg;
					
					this.compositionUrl();
				}else if(this.qianmingnum == 3){
					this.qianmingnum = 4;
					this.bgUrlqianming = this.hrq_riqiimg;
					//图像宽高
					this.dWidth = 290;
					this.dHeight = 80;
					//图像的位置
					this.dxwdight = this.dxwdight+330+275;
					this.compositionUrl();
				}else if(this.qianmingnum == 4){
					this.qianmingnum = 5;
					this.bgUrlqianming = this.hrq_lianxiimg;
					//图像宽高
					this.dWidth = 290;
					this.dHeight = 80;
					//图像的位置
					this.dxwdight = this.dxwdight+285;
					this.compositionUrl();
				}else if(this.qianmingnum == 5){
					this.setPhoto();
				}else if(this.qianmingnum == 6){
					this.getvote_edit();
				}
				uni.hideLoading()
			},
			//上传图片
			setPhoto() {
				uni.showLoading()
				this.urlTobase64(this.bgUrl)
				this.allloading = true
				this.$upload(this.bgUrl).then(result =>{
					if(result.code == 200){
						// this.infoObj.pic_arr.push(result.data.img)
						console.log(result,'上传图片');
						this.bgUrl = result.data.img
						if(this.qianmingnum == 1){
							this.bgUrldaiqianming = result.data.img;
						}else{
							this.qianmingnum = 6;
							this.bgUrldairiqi = result.data.img;
						}
						
						this.urlTobase64(result.data.img)
						
						this.allloading = false
						this.$forceUpdate()
						uni.hideLoading()
						this.setriqihqt();
						// this.getvote_edit();
						// if(i== this.bgUrl.length-1 ){
						// 	this.allloading = false
						// 	this.$forceUpdate()
						// 	uni.hideLoading()
						// }
					}
				})
			},
			urlTobase64(url){
			    uni.request({
				url: url,
				method:'GET',
				responseType: 'arraybuffer',
				success: ress => {
					let base64 = uni.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 
					// base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
					// console.log(base64)
					
					this.sf_img = base64;
				}
			    })
			},
			//上传图片
			setPhoto2() {
				uni.showLoading()
				this.urlTobase64(this.bgUrlqianming)
				this.allloading = true
				this.$upload(this.bgUrlqianming).then(result =>{
					if(result.code == 200){
						// this.infoObj.pic_arr.push(result.data.img)
						console.log(result,'上传图片2');
						this.bgUrlqianming = result.data.img
						
						this.urlTobase64(result.data.img)
						
						this.allloading = false
						this.$forceUpdate()
						uni.hideLoading()
					}
				})
			},
	    },
		onLoad(params){
			console.log(this.$store.state.userInfo,'个人信息');
			this.userhouse_record = this.$store.state.userInfo.house_record;
			this.options[0].text = this.userhouse_record.address;
			this.id = params.id;
			this.bgUrl = params.bgUrl;
			this.vote_sort = params.vote_sort;
			this.type = params.type;
			
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.page{
		padding-bottom: 120rpx;
	}
	
	button[loading]::before{
		align-self:center
	}
	button{
		display: flex;
		justify-content: center;
		align-item:center;
		padding: 0;
		border-radius: 0;
	}
	button::after{
		border: none;
	}
	
	.beijintu1{
		width: 100%;
		height: 500rpx;
		background-color: #ff9b03;
		margin: auto;
	}
	.beijintu{
		width: 500rpx;
		height: 500rpx;
		background-color: #ff9b03;
		margin: auto;
	}
	.beijintu3{
		width: 100%;
		height: 500rpx;
		background-color: #ff9b03;
		margin: auto;
	}
	
	.anniu{
		display: flex;
		    justify-content: space-around;
		    flex-direction: row;
		    align-items: center;
		height: 45px;
	}
	.fenlei{
		display: flex;
		    justify-content: space-between;
		    flex-direction: column;
	}
	.anniuyangs{
		font-size: 14px;
		line-height: 30px;
		color: #f4f4f4 !important;
		background-image: linear-gradient(#ff9b03, #fcb74e) !important;
		box-shadow: 0px 3px 7px 0px #ff9e0c;
		    width: 70px;
		    height: 30px;
		    color: #fff;
		    border-radius: 17px;
		    margin: 0 0;
	}
	.text{
		
	}
	.texts{
		height: 30px;
		    background: #bd3c3c;
		    line-height: 30px;
		    text-align: center;
		    color: #fff;
	}
	.img_list{
		display: flex;
		width: 100%;
		box-sizing: border-box;
		.img{
			width: 100%;
			    height: 500px;
			    display: inline-block;
			    overflow: hidden;
			    position: relative;
			    box-shadow: 0px 1px 3px 1px #cecece;
		}
	}
	.yingcang{
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: center;
	}
</style>
